<template>
  <div>
    <el-row class="statisticsRow" v-if="isAll">
      <el-col :span="8">
        <EchartPie :datalist="datalist" v-if="datalist.length"></EchartPie>
        <el-empty v-else></el-empty>
      </el-col>
      <el-col :span="16">
        <EchartBar :dataMap="dataMap" v-if="Object.keys(dataMap).length"></EchartBar>
        <el-empty v-else></el-empty>
      </el-col>
    </el-row>
    <el-empty v-else></el-empty>
  </div>
</template>

<script>
import EchartBar from './components/EchartBar'
import EchartPie from './components/EchartPie'
import { dstPortTop20,srcIpTop10 } from '@/api/safe/access/auxiliary'
export default {
  name: 'Statistics',
  components: {
    EchartPie,
    EchartBar
  },
  data () {
    return {
      datalist:[],
      dataMap:{},
    }
  },
  computed:{
    isAll() {
      if(!this.datalist.length && !Object.keys(this.dataMap).length) {
        return false
      }
      return true;
    }
  },
  created () {
    this.drawPie();
    this.drawBar()
  },
  methods: {
    // EchartPie
    drawPie () {
      dstPortTop20().then(res => {
        const { status,info } = res;
        if(status === 0) {
          this.datalist = (info || []).map(item=>({
            ...item,
            name:item.key
          }))
        }
      })
    },
    //EchartBar
    drawBar () {
      srcIpTop10().then(res => {
        const { status,info } = res;
        if(status === 0) {
          this.dataMap = info;
        }
      })
    }
  }
}
</script>
<style lang='scss'>
.statisticsRow {
  margin-top: 70px;
}
</style>
